<template>
    <div>
        <div class="menu">
            <el-button @click="plusWay" type="primary" style="margin-left: 16px; float:right">
                点我添加
            </el-button>
            <el-input v-model="search" placeholder="请输入线路名称"  style=" width:200px;"></el-input>
            <el-button @click="searchWay" type="primary" >点我搜索</el-button>
        </div>
        <div class="list">
            <el-table :data="wayList" style="width: 100%">
                <el-table-column label="线路名称" width="180">
                    <template #default="scope">
                        <span>{{ scope.row.wayName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="地址" width="180">
                    <template #default="scope">
                        <span>{{ scope.row.address }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="途径点" width="180">
                    <template #default="scope">
                        <span>{{ scope.row.locations }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="TEL">
                    <template #default="scope">
                        <span>{{ scope.row.tel }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="mini" @click="handleUp(scope.$index, scope.row)">置顶</el-button>
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="deleteWay(scope.row.wayName)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
        <el-pagination background :total="total" :page-size="currentSize" 
        @current-change="changeList" :current-page="currentPage"
        
            layout="prev, pager, next">
        </el-pagination>

        
        <el-form :model="formLabelAlign" v-show="drawer2" label-width="80px">
            <el-form-item label="名称">
                <el-input v-model="wayName"></el-input>
            </el-form-item>
            <el-form-item label="路线">
                <el-input v-model="locations"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="address"></el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="tel"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="subForm('ruleForm')">添加</el-button>
            </el-form-item>
        </el-form>

        <el-form :model="formLabelAlign" v-show="drawer" label-width="80px">
            <el-form-item label="路线">
                <el-input v-model="locations"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="address"></el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="tel"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="editForm">修改</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    name: 'Way',
    data() {
        return {
            wayList: [],
            drawer: false,
            drawer2: false,
            currentSize: 4,
            total: 0,
            currentPage: 1,
            search: '',
            wayName: '',
            address: '',
            locations: '',
            tel: '',
            formLabelAlign: {
                name: '',
                region: '',
                type: ''
            }
        }
    },
    methods: {
        getWays(num) {
            axios.get("http://localhost:3000/getWay",{params:{currentPage:num}}).then(res => {
                if (res.status == 200) {
                    this.wayList = res.data.wayList; 
                    this.total=res.data.total;
                }
            })
        },

        deleteWay(name) {
            console.log("deleteName", name);
            axios.post('http://localhost:3000/delWays', { name: name })
                .then(res => {
                    if (res.data == 'success') {
                        this.getWays(1);
                    }
                })
        },
        plusWay() {
            this.drawer2 = true;

        },
        subForm() {
            let wayName = this.wayName;
            let address = this.address;
            let locations = this.locations;
            let tel = this.tel;
            console.log("sub",wayName)
            axios.post("http://localhost:3000/plusWay", {
                wayName: wayName,
                address: address,
                locations: locations,
                tel: tel
            }).then(res => {
                if (res.data.code == 200) {
                    this.$message({
                        message: '成功',
                        type: 'success'
                    });
                    this.getWays(1);
                    this.drawer2 = false;
                } else {
                    this.$message({
                        message: '警告',
                        type: 'warning'
                    });
                }
            })
            // this.drawer2=false;
        },
        editForm(){
            let wayName = this.wayName;
            let address = this.address;
            let locations = this.locations;
            let tel = this.tel;
            axios.post("http://localhost:3000/editWay", {
                wayName: wayName,
                address: address,
                locations: locations,
                tel: tel
            }).then(res=>{
                if (res.data.code == 200) {
                    this.drawer = false;
                    this.getWays(1);
                }
            })
        },
        handleEdit(index, row) {
            this.drawer = true;
            this.wayName = row.wayName;
            this.locations = row.locations;
            this.tel = row.tel;
            this.address = row.address;
        },
        searchWay(){
            axios.post('http://localhost:3000/searchWay', { wayName:this.search })
                .then(res => {
                    if (res.status== 200) {
                        this.wayList = res.data;
                    }
                })
        },
        handleUp(index,row){
            this.wayName=row.wayName;
            axios.post('http://localhost:3000/upWay',{wayName:this.wayName})
            .then(res => {
                    if (res.status== 200) {
                        this.wayList = res.data;
                        // this.getWays(1);
                    }
                })
        },
        changeList(num){
            this.getWays(num);
        }
    },
    mounted() {
        this.getWays(1);
    }
}
</script>
<style scoped></style>